<template>
	<view>
		<view class="buycart-main">
			
			<view class="product-card" v-for="item in cartList" :key="item.id">
				<view class="info-block">
					<evan-checkbox v-model="item.checked" :primary-color="'#354E44'" :shape="'square'" :icon-size="13" ></evan-checkbox>
					<view class="nav">
						<image :src="item.productPic" class="cover-img"></image>
						<view class="info-text">
							<view class="name">{{item.productName}}</view>
							<view class="code">编号:{{item.productSkuId}}</view>
							<view class="price">价格:{{item.price}}元</view>
							<view class="num">数量:{{item.quantity}}件</view>
						</view>
					</view>
				</view>
				<view class="buy-count-steps">
					<view class="btn" @click="delProduct(item.id)">删除</view>
					<view class="container" style="display: flex; justify-content: space-between; width: 250rpx;">
						<view class="step-reduce" @tap="item.quantity > 1 ? item.quantity-- : ''">-</view>
						<view class="step-text">{{item.quantity}}</view>
						<view class="step-add"  @tap="item.quantity++">+</view>
					</view>
				</view>
			</view>
			
			<view class="footer-bar">
				<view class="sel-all">
					<text>全选</text>
					<evan-checkbox v-model="allChecked" :primary-color="'#354E44'" :shape="'square'" :icon-size="13" ></evan-checkbox>
				</view>
				
				<view class="price">
					合计: ¥
					<text style="color: red; margin-right: 10rpx;">{{total}}</text>
					<view class="btn" @click="goOrder">结算</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { findAllCartItem , addPreOrder , delCartItems } from "../../../api/my/cart/cart.js";
	import mix from "../../../mixins/mixins.js";
	export default {
		data() {
			return {
				cartList:[],
			};
		},
		mixins:[mix],
		methods:{
			init(){
				findAllCartItem().then(res=>{
					
					// this.cartList = res.data.items;
					// this.cartList.forEach(ele=>{
					// 	ele.checked = false
					// });
					res.data.items.forEach(ele=>{
						ele.checked = false
					});
					this.cartList = res.data.items;
				})
			},
			// 跳转到订单页面
			goOrder(){
				var newlist = [];
				this.cartList.forEach(ele=>{
					if(ele.checked){
						
						var obj = {
							cartId:ele.id,
							productId:ele.productId,
							productQuantity:ele.quantity,
							productSkuId:ele.productSkuId,
						};
						newlist.push(obj);
					}
				})
				
				if(newlist.length==0){
					uni.showToast({
						title:'请选择商品'
					})
				}else{
					addPreOrder({
						orderItemList:newlist,
					}).then(res=>{
						console.log(res);
						var orderId = res.data.orderId;
						//跳转到订单页， 提示弹窗
						
						uni.showToast({
						    title: '购买成功,1秒后跳转至订单页',
						    icon: 'success',
							duration:1000,
							success() {
								setTimeout(function(){
									uni.navigateTo({
										url:`../../home/order/order?orderId=${orderId}`
									})
								},1000)
							}
						});
						
					})
				}
				// console.log(newlist);
				
			},
			// 删除
			delProduct(id){
				uni.showModal({
				    title: '删除提示',
				    content: '确定删除吗',
				    success: res=>{
				        if (res.confirm) {
							
				            delCartItems([id]).then(res=>{
								this.init();
				            	uni.showToast({
				            		title:'删除成功',
									icon:'success',
									duration:1000,
				            	});
				            })
							
				        } else if (res.cancel) {
				            return
				        }
				    }
				});
				
			}
			
		},
		computed:{
			// 全选
			allChecked:{
				get(){
					return this.cartList.every(ele=>ele.checked == true);
				},
				set(val){
					this.cartList.forEach(ele=>ele.checked = val);
				}
			},
			// 总价
			total(){
				return this.cartList.reduce((pre,cur)=>{
					if(cur.checked){
						return pre + cur.price * cur.quantity
					}else {
						return pre
					}
					
				},0)
			}
		},
		onShow() {
			this.checkLogins(this.init)
		},
	}
</script>

<style lang="scss" scoped>
	.buycart-main {
		padding-bottom: 150rpx;
		 .product-card {
			 width: 672rpx;
			 margin: 50rpx auto;
			 background-color: #fff;
			 border-radius: 24rpx;
			 padding: 20rpx;
			 box-sizing: border-box;
			  .info-block {
				  display: flex;
				  justify-content: flex-start;
				  align-items: center;
				   .nav {
					   display: flex;
					   justify-content: flex-start;
					   align-items: center;
					    .cover-img {
							width: 136rpx;
							height: 136rpx;
							flex-shrink: 1;
							margin: 0 20rpx;
						 }
						.info-text {
							font-size: 22rpx;
							color: #8d8d8d;
							 .name {
								 font-size: 26rpx;
								 color: #3e3e3e;
							 }
						}
				   }
			  }
			  // 计数器
			  .buy-count-steps {
			  	display: flex;
			  	justify-content: space-between;
				// 删除
				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 200rpx;
					height: 60rpx;
					font-size: 24rpx;
					background-color: red;
					color: #fff;
					border-radius: 30rpx;
					margin-left: 30rpx;
					margin-top: 10rpx;
				}
			  	.step-reduce , .step-add {
			  		width: 70rpx;
			  		height: 60rpx;
			  		background: #f1ece7;
			  		border-radius: 50%;
			  		text-align: center;
			  		line-height: 60rpx;
			  		font-size: 30rpx;
			  		margin: 0 6rpx;
			  	}
			  	.step-text {
			  		width: 90rpx;
			  		border-radius: 30rpx;
			  		height: 60rpx;
			  		background: #f1ece7;
			  		text-align: center;
			  		line-height: 60rpx;
			  		font-size: 30rpx;
			  		margin: 0 6rpx;
			  	}
			  }
		 }
		 // 底部导航栏
		 .footer-bar {
			 position: fixed;
			 display: flex;
			 justify-content: space-around;
			 align-items: center;
			 left: 0;
			 bottom: 0;
			 width: 100%;
			 height: 150rpx;
			 background-color: #fff;
			 .sel-all {
				 display: flex;
				 justify-content: flex-start;
				 align-items: center;
				  text {
					  margin-right: 20rpx;
				  }
			  }
			  .price {
				  .btn {
					  display: inline-block;
					  width: 208rpx;
					  height: 80rpx;
					  background: #354e44;
					  border-radius: 28rpx;
					  color: #fff;
					  font-size: 36rpx;
					  line-height: 80rpx;
					  text-align: center;
				}
			  }
		 }
	}
</style>
